<template>
  <view class="container">
    <!-- 奖励提示 -->
    <view class="reward-info">
      <view class="reward-title">
        我的奖励展示：
      </view>
    </view>

    <!-- 用户信息展示 -->
    <view class="user-item" v-if="currentUser">
      <view class="user-name">{{ currentUser.userName }}</view>
      <view class="flag-container">
        <view v-for="flagIndex in rewardCount" :key="flagIndex">
          <image src="/static/red-flag.png" class="flag" />
        </view>
        <view v-if="rewardCount === 0" class="no-flag">
          暂无
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { listPerformanceyj } from '@/api/system/performanceyj'

export default {
  data() {
    return {
      currentUser: null,  // 当前用户信息
      rewardCount: 0
    }
  },
  onLoad() {
    // 从本地存储获取用户信息
    const userInfo = uni.getStorageSync('userInfo')
    if (userInfo && userInfo.user) {
      this.currentUser = userInfo.user
      this.loadRewardCount(userInfo.user.userId)
    } else {
      this.$modal.msgError('未获取到用户信息')
    }
  },
  methods: {
    async loadRewardCount(userId) {
      try {
        const res = await listPerformanceyj({ userId })
        if (res.code === 200 && Array.isArray(res.rows)) {
          this.rewardCount = res.rows.reduce((sum, row) => {
            const n = parseInt(row.bb, 10)
            return sum + (isNaN(n) ? 0 : n)
          }, 0)
        } else {
          this.rewardCount = 0
        }
      } catch (e) {
        this.rewardCount = 0
        this.$modal.msgError('查询奖励失败')
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f0f0f0;
  min-height: 100vh;
}
.reward-info {
  margin-bottom: 20rpx;
}
.reward-title {
  font-size: 40rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  padding: 20rpx 0;
}
.user-item {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}
.user-name {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 10rpx;
  font-weight: bold;
}
.flag-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.flag {
  width: 60rpx;
  height: 60rpx;
  margin: 5rpx;
}
.no-flag {
  font-size: 28rpx;
  color: #999;
}
</style>
